<!DOCTYPE html>
<html>
<head>
     <title>ARE YOU HUNGRY</title>
     <link rel="stylesheet"type="text/css" href="css/style.css">
     <meta charset="UTF-8">
     <script src="./js/app.js"></script>

</head>
<body>
    <header>
         <!-- navigation top-->

         <div class="home">
                <div class="logo">
                    <img src="logo.png">
                </div>
                <ul >
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Restaurant</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Hungry App</a></li>
    
                  <!-- logged in user-->
    
                    <li></li>  <ul class="profile-wrapper">
                            <li>
                                <!-- user profile -->
                                <div class="profile">
                                    <img src="./images/profile.jpg" />
                                    <a href="#" class="name">Chen Yan</a>
                        
                                    <!-- more menu -->
                                    <ul class="menu">
                                        <li><a href="edituser.html">Edit Account</a></li>
                                        <li><a href="index.html">Log out</a></li>
                                    </ul>
                                </div>
                            </li>
                        </ul>  </li>
                        <!--end logged in user-->
                </ul>
            </div>
            <div>
                <!-- end nav -->
    
          <!-- to slide the image -->
          <div class='mySlides fade' >
              <div class='numbertext'>$count / 3</div>
              <img src= './images/combine1.jpg' style='margin-top:100px;width:1000px;height:300px;margin-left:120px'>
              <div class='text'> </div>    
            </div>
            <div class='mySlides fade'>
                <div class='numbertext'>$count / 3</div>
                <img src= './images/combine2.jpg' style='margin-top:100px;width:1000px;height:300px;margin-left:120px'>
                <div class='text'> </div>   
                
              </div>

              <div class='mySlides fade'>
                  <div class='numbertext'>$count / 3</div>
                  <img src= './images/combine3.jpg' style='margin-top:100px;width:1000px;height:300px;margin-left:120px'>
                  <div class='text'> </div>
                  
                </div>

               
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>
          <script>
              var slideIndex = 1;
              showSlides(slideIndex);
              
              function plusSlides(n) {
                showSlides(slideIndex += n);
              }
              
              function currentSlide(n) {
                showSlides(slideIndex = n);
              }
              
              function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " active";
              }
              </script>
        </div>
    </header>
    <br><br><br><br><br>
  <!-- end slide -->

  <!-- clickable image -->

  <input type="image" src="./images/pstan.png" style='margin-left:140px;width:1000px;height:250px'>
  <br><br><br><br><br>
  <input type="image" src='./images/grab.jpg'style='margin-left:140px;width:1000px;height:250px'>
  


  <!-- footer -->
  <br><br><br><br><br><br><br><br>

  
<div class="footer">
  <div class="contain">
  <div class="col">
    <h1>About</h1>
    <ul>
        <li><a href="ourstory.html">Our Story</a></li>
      <li>Sustainability</li>
      <li><a href="about.html">Our Founder</a></li>
    </ul>
  </div>
  <div class="col">
    <h1>Services</h1>
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li>Delivery</li>
      <li>Ordering & Payment</li>
      <li>FAQ</li>
      

    </ul>
  </div>

  <div class="col">
    <h1>Polices</h1>
      <li>Privacy Policy</li>
      <li>Term of Use</li>
    </ul>
  </div>

  <div class="col">
    <h1>      </h1>
    <ul>
      <li>Feedback</li>
    </ul>
  </div>
  <div class="col social">
    <h1>Social</h1>
    <ul>
      <li><img src="./images/ins.png" width="32" style="width: 32px;"></li>
      <li><img src="./images/twi.jpg" width="32" style="width: 32px;"></li>
      <li><img src="./images/fb.png" width="32" style="width: 32px;"></li>
    </ul>
  </div>
<div class="clearfix"></div>
</div>
</div>
<!-- END OF FOOTER -->
    
</body>
</html>